<template>
  <div :class="`tw-librightslider x${_uid}`">
    <div class="tw-rightslider"
      :style="{backgroundColor:bgColor,zIndex:zIndex, borderRadius: radiusSize, top: top, bottom: bottom, right: right}"
      v-show="!closeView">
      <template v-if="list.length > 0 && !isLayout">
        <a class="tw-rightslider-closebtn"
          :style="{width: closeWidth,height: closeHeight, fontSize: closeFontSize, lineHeight:closeHeight, backgroundColor:closeBgColor, zIndex:zIndex}"
          @click="handleCloseView">
          <i class="el-icon-close"></i>
        </a>

        <div class="tw-rightslider-layer">
          <a @click="handleClick(list[0])">
            <img :src="list[0].imgUrl"
              :style="{width: imgWidth, height: imgHeight, objectFit: objectFit}"
              :alt="list[0].label ? list[0].label : ''"
              v-if="list[0].imgUrl">
            <img :src="`${$twApp.fileBaseUrl}${icons[0].localPath}`"
              :style="{width: imgWidth, height: imgHeight, objectFit: objectFit}"
              :alt="list[0].label ? list[0].label : ''"
              v-else-if="icons.length > 0 && icons[0].localPath">
            <img src="@assets/pic.png"
              :style="{width: imgWidth, height: imgHeight, objectFit: objectFit}"
              :alt="list[0].label ? list[0].label : ''"
              v-else>
            <template v-if="list.length > 0 && list[0].label">
              <div v-html="list[0].label"></div>
            </template>
          </a>
        </div>
      </template>
      <template>
        <slot></slot>
      </template>
    </div>
  </div>
</template>

<script>
import props from './props'

export default {
  name: 'rightslider',

  props,

  data() {
    return {
      closeView: false
    }
  },

  computed: {
    style() {
      return {
        fontSize: this.fontSize,
        color: this.color
      }
    }
  },

  methods: {
    getIcons(type, idx) {
      if (type === 'default') {
        return this.icons[idx]
      } else {
        return this.hoverIcons[idx] || this.icons[idx]
      }
    },

    setStyle() {
      // const radiusSize = `${parseInt(this.height) / 2} + ${(this.height + '').replace(/\d+/, '')}`

      let style = `
        ::root.tw-librightslider .tw-rightslider-closebtn:hover {
          color: ${this.closeHColor};
          background-color: ${this.closeHBgColor};
        }

      `

      this.addStyle(style)
    },

    addStyle(style) {
      this.$el.classList.add(`x${this._uid}`)
      const styleEl =
        document.getElementById(this._uid) || document.createElement('style')
      styleEl.id = this._uid
      styleEl.innerText = style
        .replace(/::root/gm, `.x${this._uid}`)
        .replace(/\n/gm, '')

      document.head.appendChild(styleEl)
    },

    handleClick(item) {
      if (item.href) {
        if (item.target === '_blank') {
          // window.open(item.href + `?${this.$twApp.user.accreditUrl}`, '_blank')
          window.open(item.href, '_blank')
        } else {
          window.location.href = item.href
        }
      } else if (typeof this.clickFn === 'function') {
        this.clickFn(this)
      }
    },

    handleCloseView() {
      this.closeView = true
    }

    // selectTab (idx) {
    //   this.active = parseInt(idx)
    // },

    // resize () {
    //   if (this.$refs.bottomtabs.offsetWidth) {
    //     this.elwidth = this.$refs.bottomtabs.offsetWidth + 'px'
    //   }
    // }
  },

  mounted() {
    this.setStyle()
    // this.handleClick(this.resultList[0], true)
    // this.anchorTop = parseInt(this.liftTop) ? parseInt(this.liftTop) : this.$el.offsetHeight

    // this.$nextTick(() => {
    //   if (this.$refs.bottomtabs.parentNode.offsetWidth) {
    //     this.elwidth = this.$refs.bottomtabs.parentNode.offsetWidth + 'px'
    //   }
    // })
    // window.addEventListener('resize', this.resize)
  },

  beforeDestroy() {
    // window.removeEventListener('resize', this.resize)
  },

  watch: {
    style: {
      deep: true,
      handler() {
        this.setStyle()
      }
    }
  }
}
</script>

<style lang="scss">
@import './css/index.scss';
</style>
